<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>tupian</title>
</head>
<style type="text/css">
	.bgM{
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1000;
	    background-color: rgba(0,0,0,0.85);
	    overflow: hidden;
	    background-attachment:fixed;
	}
	.bgM img{
	    width: 100%;
	    position: absolute;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1001;
	    margin: auto;
	}


	#imgViewer{
		display: none;
		width: 100%;
	    height: 100%;
	    /*opacity: 0.2;*/
	    position: fixed;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1000;
	    background-color: rgba(0,0,0,0.85);
	    overflow: hidden;
	    background-attachment:fixed;
	}
	.full-image{
		list-style: none;float: left;
		display: inline-block;
	    position: relative;
	    width: 100%;
	    height: 100%;
	    text-align: center;
    	/*position: relative;*/
	}
	.full-image img{
		display: inline-block;
		width: 100%;
	    position: absolute;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1001;
	    margin: auto;
	}
</style>
<body>
<div id="con">
	<img src="./img/tibet-1.jpg">
	<img src="./img/tibet-2.jpg">
	<img src="./img/tibet-3.jpg">
	<p><img src="./img/tibet-4.jpg"></p>
	<a><img src="./img/tibet-5.jpg"></a>
</div>



<script type="text/javascript">
var $Dom = document.querySelector("img");

var $Dom = document.getElementById('con');

var img = $Dom.getElementsByTagName('img');

var imgViewer = document.createElement("div");
	imgViewer.id = 'imgViewer';		
	var divHtml = '';

console.log(img);
for (var i = 0; i < img.length; i++) {
	var imgObj = img[i];
	imgObj.index = i;
	var imgSrc = imgObj.src;
	imgObj.onclick = function (argument) {
		// document.getElementById('imgViewer')
		imgViewer.style.display = 'block';
		console.log(this.index);
	}
	divHtml += '<div class="full-image" id="img-'+i+'"><img src="'+imgSrc+'"></div>';
	
}
imgViewer.innerHTML = divHtml;
document.body.appendChild(imgViewer);
imgViewer.onclick = function (e) {
	this.style.display = 'none';
}
// console.log(imgViewer.style.width);

</script>





</body>
</html>